<template>
  <el-drawer v-model="showBindsDrawerFlag" size="35%" :show-close="true">
    <el-descriptions
        title="服务与组件绑定关系"
        :column="2"
        border
    >
      <el-descriptions-item v-for="(item,index) in resultType">
        <template #label>
          <div class="cell-item">
            <div>{{ item.description }}</div>
            <span>({{ item.name }})</span>
          </div>
        </template>
        <el-select-v2 v-model="item.value"
                      multiple
                      style="width: 200px"
                      :options="options"
                      >
        </el-select-v2>
      </el-descriptions-item>

    </el-descriptions>

  </el-drawer>
</template>
<script>
export default defineComponent({
  name: "BindsDrawer"
})
</script>
<script setup>
import {getAllFieldWidgets, getServiceById} from "@/utils/util";

const showBindsDrawerFlag = defineModel()
const props = defineProps({
  designer: Object,
  formConfig: Object,
})
console.log('designer', props.designer);
const resultType = getServiceById(props.formConfig, props.formConfig.service.key)?.resultType
const options = getAllFieldWidgets(props.designer.widgetList).map(item => ({
  value: item.field.id,
  label: item.field.options.label ?? item.field.id
}))
</script>

<style scoped lang="scss">
.cell-item {
  font-weight: bold;

  span {
    color: var(--ep-color-primary);
  }
}
</style>
